<template>
	<view class="index">
		<view class="index-top">
			<swiper indicator-dots="true" autoplay="true" interval="1500" class="swipers">
				<swiper-item><image src="../../static/img/index-bannerrs.png"></image></swiper-item>
				<swiper-item><image src="../../static/img/index-bannerrs.png"></image></swiper-item>
				<swiper-item><image src="../../static/img/index-bannerrs.png"></image></swiper-item>
			</swiper>
			<uni-search-bar  :radius="100" placeholder="超级秒杀！轮胎99元起···" @confirm="search" class="inputs"></uni-search-bar>
		</view>
		<view class="index-list">
			<view class="list-one">
				<view class="big">大保养</view>
				<view>小保养</view>
			</view>
			<view class="list-two">
					<view class="list-three" v-for="(item,key) in indexList">
						<view class="photo" :style="{background:item.bg}"><image :src="item.img"></image></view>
						<text>{{item.title}}</text>
					</view>
			</view>		
			<view class="list-two">
					<view class="list-three" v-for="(item,key) in indexLists">
						<view class="photo" :style="{background:item.bg}"><image :src="item.img"></image></view>
						<text>{{item.title}}</text>
					</view>
			</view>		
		</view>
		<button type="default" class="btns">+ 点击添加车辆</button>
		<view class="index-cars">
			<view class="cars-left">
				<view class="left-one">纽曼·车载空气净化器</view>
				<view class="left-two">新车除甲醛pm2.5</view>
				<view class="left-three"><text>了解一下</text><image src="../../static/img/more.png" mode=""></image>点开售</view>
			</view>
			<view class="cars-right">
				<image src="../../static/img/upkeep.png"></image>
			</view>
		</view>
		<view class="index-seckill">
			<view class="seckill-one">
				<text class="kill">天天秒杀</text>
				<text class="mores">更多</text>
			</view>
			<!--  -->
			<view class="grace-header-cate">
			<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
			<view class="seckill-two" >
				<view class="seckill-three" v-for="(item,key) in seckillList" :key="key" :data-cateid="cate.bId" :data-index="index" :class="[cateCurrentIndex == key ? 'grace-tab-current' : '']" @tap="tabChange">
					<view class="bgcolor"  :style="{background:item.bg}">
						<image :src="item.img"></image>
						<view class="go">{{item.title}}<text>{{item.text}}</text></view>
					</view>
				</view>
			</view>
			</scroll-view>
			</view>
			
		</view>
		<view class="index-shop">
			<view class="shop-one">
				<text class="kill">拼团购</text>
				<text class="mores">更多</text>
			</view>
			<!-- view class="shop-two">
				<view class="shop-three"><image src="../../static/img/lun.png"></image></view>
				<view class="shop-four">
					<text class="one">爆款</text>
					<text>轮胎/汽车轮胎 205/55R16 91V 韧悦 ENERGY XM2</text>
					<view class="sums">￥520<text>已拼200件</text></view></view>
			</view> -->
			<view class="shop-two"  v-for="(item,key) in shopList" :key="key">
				<view class="shop-three"><image :src="item.img"></image></view>
				<view class="shop-four">
					<text :class="key==0?'one':''" >{{item.title}}</text>
					<text>{{item.title1}}</text>
					<view class="sums">{{item.title2}}<text>{{item.title3}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
export default {
	components:{
		uniSearchBar
	},
	data() {
		return {
			indexList:[
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/live.png',title:'发动机养护'},
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/live.png',title:'燃油系统养护'},
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/live.png',title:'打洞机舱清洗'},
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/live.png',title:'前雨刷'},					
			],
			indexLists:[
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/live.png',title:'空调系统养护'},
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/live.png',title:'冷却系统养护'},
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/live.png',title:'引擎系统养护'},
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/live.png',title:'道路救援'},					
			],
			seckillList:[
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/xiong.png',title:'￥0.01',text:'立即抢'},
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/xiong.png',title:'￥0.01',text:'立即抢'},
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/xiong.png',title:'￥0.01',text:'立即抢'},
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/xiong.png',title:'￥0.01',text:'立即抢'},
				{bg:'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',img:'/static/img/xiong.png',title:'￥0.01',text:'立即抢'},
			],
			shopList:[
				{img:'/static/img/lun.png',title:'爆款',title1:'轮胎/汽车轮胎 205/55R16 91V 韧悦 ENERGY XM2',title2:'￥520',title3:'已拼200件'},
				{img:'/static/img/lun.png',title1:'轮胎/汽车轮胎 205/55R16 91V 韧悦 ENERGY XM2',title2:'￥520',title3:'已拼200件'},
				{img:'/static/img/lun.png',title1:'轮胎/汽车轮胎 205/55R16 91V 韧悦 ENERGY XM2',title2:'￥520',title3:'已拼200件'},
				{img:'/static/img/lun.png',title1:'轮胎/汽车轮胎 205/55R16 91V 韧悦 ENERGY XM2',title2:'￥520',title3:'已拼200件'},
			]
		}
	},
	onLoad() {

	},
	methods: {
			tabChange(e){
				console.log(e);
			}
	}
}
</script>

<style lang="scss">

.index{
	.index-top{
		// width: 100%;
		// height: 400upx;
		// background-image: url("http://q79q98ocd.bkt.clouddn.com/index-bannerrs.png");
		// background-repeat: no-repeat;
		// background-size: 100%;
		position: relative;
		image{
			width: 100%;
			height: 400rpx;
		}
		.inputs{
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			width: 100%;
		}
	}
	.index-list{
		width: 95%;
		margin: 0 auto;
		background-color: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(55,121,0,0.3);
		position: absolute;
		top:240rpx;
		left:0rpx;
		margin-left: 19rpx;
		border-radius: 20rpx;
		.list-one{
			display:flex;
			flex-wrap:nowrap;
			padding: 30upx 0;
			border-bottom: 2px solid #ccc;
			view{
				flex-direction: row;
				width: 50%;
				text-align: center;
				font-weight: bold;
				font-size: 35rpx;
			}
			.big{
				border-right: 1px solid #F6F3F4;
			}
		}
		.list-two{
			line-height:100rpx;
			width:100%;
			height:200rpx;
			display:flex;
			flex-direction: row;		
			margin:20rpx 0rpx;
			border-radius: 15rpx;
			.list-three{
				padding: 0 45upx;
				margin-top:20rpx;
				width:100rpx;
				height:100rpx;
				// background-color:#f00;
				color:#333333;
				text-align: center;
				line-height:30rpx;
				border-radius:50rpx;
				// background: linear-gradient(0deg,rgba(246,185,9,1),rgba(246,185,9,1));
				.photo{
					border-radius: 50rpx;
					image{
						width:95rpx;
						height:95rpx
					}
				}
				text{
					font-size: 24rpx;
					padding-top: 5rpx;
				}
			}
		}
	}
	.btns{
		margin-top: 540rpx;
		width: 95%;
		background-color: #DE3548;
		color: #fff;
	}
	.index-cars{
		display: flex;
		flex-wrap: nowrap;
		width: 95%;
		margin: 35rpx auto;
		background-color: #FFFFFF;
		box-shadow: 4px 4px 10px 4px rgba(55,121,0,0.3);
		border-radius: 20rpx;
		padding: 35rpx 0rpx;
		.cars-left{
			flex-direction: row;
			width: 70%;
			padding-left: 30rpx;
			line-height: 55rpx;
			.left-one{
				font-size: 35rpx;
				font-weight: bold;
			}
			.left-two{
				color: #BAB7BB;
				font-size: 30rpx;
			}
			.left-three{
				position: relative;
				font-size: 20rpx;
				color: #A29FA2;
				text{
					background-color: #6A686B;
					color: #fff;
					border-radius: 10rpx;
					font-size: 20rpx;
					padding: 10rpx 30rpx 10rpx 20rpx;
				}
				image{
					position: absolute;
					left: 98rpx;
					bottom: 11rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.cars-right{
			image{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	.index-seckill{
		width: 95%;
		
		margin: 0 auto;
		background-color: #FFFFFF;
		box-shadow: 4px 4px 10px 4px rgba(55,121,0,0.3);
		border-radius: 20rpx;
		padding: 30rpx 0;
		.seckill-one{
			display: flex;
			flex-wrap: nowrap;
			.kill{
				width: 85%;
				justify-content:flex-start;
				padding-left: 20rpx;
				font-weight: bold;
				font-size: 40rpx;
			}
			.mores{
				justify-content:flex-end;
				color: #C5C3C4;
			}
		}
		.seckill-two{
			line-height:100rpx;
			width:100%;		
			height: 220rpx;
			display:flex;
			flex-direction: row;
			border-radius: 15rpx;
			.seckill-three{
				padding: 0 20upx;
				width:25%;
				height:100rpx;
				color:#333333;
				text-align: center;
				line-height:30rpx;
				margin: 25rpx 0;
				.bgcolor{
					width: 180rpx;
					height: 200rpx;
					border-radius: 15rpx;
					image{
						width: 120rpx;
						height: 120rpx;
					}
					.go{
						font-size: 20rpx;
						color: #fff;
						padding-top: 30rpx;
						text{
							margin-left: 5rpx;
							background-color: #64A8E5;
							padding: 5rpx 20rpx;
							border-radius: 10rpx;
						}
					}
				}
			}			
		}
	}
	.index-shop{
		width: 95%;
		// height: 500rpx;
		margin: 35rpx auto;
		background-color: #FFFFFF;
		box-shadow: 4px 4px 10px 4px rgba(55,121,0,0.3);
		border-radius: 20rpx;
		padding: 30rpx 0;
		.shop-one{
			display: flex;
			flex-wrap: nowrap;
			.kill{
				width: 85%;
				justify-content:flex-start;
				padding-left: 20rpx;
				font-weight: bold;
				font-size: 40rpx;
			}
			.mores{
				justify-content:flex-end;
				color: #C5C3C4;
			}
		}
		.shop-two{
			display: flex;
			margin: 20rpx 0;
			line-height: 50rpx;
			padding: 0 30rpx;
		}
		.shop-three{
			flex-direction: row;
			text-align: center;
			width: 50%;
			padding-top: 35rpx;
			border-bottom: 1px solid #E8E7E9;
			image{
				width: 125rpx;
				height: 125rpx;
			}
		}
		.shop-four{
			border-bottom: 1px solid #E8E7E9;
			.one{
				background-color: #f00;
				padding: 0rpx 8rpx;
				color: #fff;
				font-size: 25rpx;
				border-radius: 5rpx;
				margin-right: 5rpx;
			}
			.sums{
				color: #f00;
				font-size: 35rpx;
				padding-top: 20rpx;
				text{
					color: #D9D7DA;
					font-size: 25rpx;
					padding-left: 10rpx;
				}
			}
		}
		
		
		
	}
		

}	

</style>
